<template>
	<div class="adminMain" v-loading="load.load">
		<div class="h3">微信支付 <span @click="detailFunction('show', -1, 'wxpay')">添加</span></div>
		<el-table :data="tableData.wxPay" border>
			<el-table-column prop="" label="Appid" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.appid || "-" }}
				</template>
			</el-table-column>
			<el-table-column prop="" label="商户号" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.tenant_no || "-" }}
				</template>
			</el-table-column>
			<el-table-column prop="weight" label="权重" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="" label="状态" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" @change="changeStatus($event, scope.$index, 'wxpay')"></el-switch>
				</template>
			</el-table-column>
		    <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
		        <template slot-scope="scope">
		            <div class="tableBtn">
						<a @click="detailFunction('show', scope.$index, 'wxpay')">编辑</a>
						<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.row.id, 'wxpay')">
						    <a slot="reference" style="color:#999;">删除</a>
						</el-popconfirm>
		            </div>
		        </template>
		    </el-table-column>
		</el-table>
		
		<div class="h3" style="margin-top: 40px;">支付宝支付 <span @click="detailFunction('show', -1, 'alipay')">添加</span></div>
		<el-table :data="tableData.aliPay" border>
			<el-table-column prop="" label="Appid" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.appid || "-" }}
				</template>
			</el-table-column>
			<el-table-column prop="" label="PID" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					{{ scope.row.pid || "-" }}
				</template>
			</el-table-column>
			<el-table-column prop="weight" label="权重" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="" label="状态" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.status" @change="changeStatus($event, scope.$index, 'alipay')"></el-switch>
				</template>
			</el-table-column>
		    <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
		        <template slot-scope="scope">
		            <div class="tableBtn">
						<a @click="detailFunction('show', scope.$index, 'alipay')">编辑</a>
						<el-popconfirm title="确定删除吗？" @confirm="deleteItem(scope.row.id, 'alipay')">
						    <a slot="reference" style="color:#999;">删除</a>
						</el-popconfirm>
		            </div>
		        </template>
		    </el-table-column>
		</el-table>
		
		<!-- 详情弹窗 -->
		<el-dialog title="提示" :visible.sync="detail.show" width="650px" :close-on-click-modal="false">
			<el-form label-position="top" v-if="detail.data">
				<el-form-item label="账号" required>
					<el-radio-group v-model="detail.data.payType">
					    <el-radio label="wxpay" disabled>微信</el-radio>
					    <el-radio label="alipay" disabled>支付宝</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="Appid" required>
					<el-input v-model="detail.data.appid"></el-input>
				</el-form-item>
				<template v-if="detail.data.payType === 'wxpay'">
					<el-form-item label="商户号" required>
						<el-input v-model="detail.data.tenant_no"></el-input>
					</el-form-item>
					<el-form-item label="APIv2密钥" required>
						<el-input v-model="detail.data.api_key_v2"></el-input>
					</el-form-item>
					<el-form-item label="APIv3密钥" required>
						<el-input v-model="detail.data.api_key_v3"></el-input>
					</el-form-item>
					<el-form-item label="证书序列号" required>
						<el-input v-model="detail.data.serial_no"></el-input>
					</el-form-item>
					<el-form-item label="国际RSA序列号" required>
						<el-input v-model="detail.data.serial_no_rsa"></el-input>
					</el-form-item>
					<el-form-item label="apiclient_cert.p12" required>
						<el-input v-model="detail.data.cert_p12"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'cert_p12')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="apiclient_cert.pem" required>
						<el-input v-model="detail.data.cert_pem"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'cert_pem')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="apiclient_key.pem" required>
						<el-input v-model="detail.data.key_pem"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'key_pem')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="权重" required>
						<el-input v-model="detail.data.weight"></el-input>
					</el-form-item>
					<el-form-item label="状态" required>
						<el-switch v-model="detail.data.status"></el-switch>
					</el-form-item>
				</template>
				<template v-if="detail.data.payType === 'alipay'">
					<el-form-item label="PID" required>
						<el-input v-model="detail.data.pid"></el-input>
					</el-form-item>
					<el-form-item label="应用私钥RSA2048" required>
						<el-input v-model="detail.data.app_private_key"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'app_private_key')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="应用公钥RSA2048" required>
						<el-input v-model="detail.data.app_public_key"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'app_public_key')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="alipayCertPublicKey_RSA2" required>
						<el-input v-model="detail.data.cert_public_key"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'cert_public_key')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="alipayRootCert" required>
						<el-input v-model="detail.data.root_cert"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'root_cert')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="CSR文件" required>
						<el-input v-model="detail.data.csr"></el-input>
						<el-upload action="" :show-file-list="false" :http-request="(response, file, fileList) => fileUpload(response, 'csr')">
							<a class="color" style="margin-top: 5px;display: block;">上传文件</a>
						</el-upload>
					</el-form-item>
					<el-form-item label="权重" required>
						<el-input v-model="detail.data.weight"></el-input>
					</el-form-item>
					<el-form-item label="状态" required>
						<el-switch v-model="detail.data.status"></el-switch>
					</el-form-item>
				</template>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detail.show = false;">取 消</el-button>
				<el-button type="primary" @click="detailFunction('post')" :loading="detail.load.load">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 表格数据
				tableData: {
					wxPay: [],
					aliPay: [],
				},
				
				// 详情
				detail: {
					show: false,
					load: {load:false},
					data: null
				},
				
			};
		},
		methods: {
			
			// 上传文件
			fileUpload(res, key){
				let _this = this;
				_this.app.uploadFile({ file: res.file, type: "admin", load: _this.detail.load }).then((res) => {
					_this.detail.data[key] = res.data.url;
				});
			},
			
			// 修改状态
			changeStatus(e, index, payType){
				let _this = this;
				_this.detailFunction("show", index, payType);
				_this.detail.data.status = e;
				_this.detail.show = false;
				_this.detailFunction("post", index, payType);
			},
			
			// 详情弹窗
			detailFunction(type, index, payType){
				let _this = this;
				if(type == "show"){
					let data = {};
					if(payType === "wxpay"){
						let item = _this.tableData.wxPay;
						data = {
							payType,
							appid: index === -1 ? "" : item[index].appid,
							tenant_no: index === -1 ? "" : item[index].tenant_no,
							api_key_v2: index === -1 ? "" : item[index].api_key_v2,
							api_key_v3: index === -1 ? "" : item[index].api_key_v3,
							serial_no: index === -1 ? "" : item[index].serial_no,
							serial_no_rsa: index === -1 ? "" : item[index].serial_no_rsa,
							cert_p12: index === -1 ? "" : item[index].cert_p12,
							cert_pem: index === -1 ? "" : item[index].cert_pem,
							key_pem: index === -1 ? "" : item[index].key_pem,
							weight: index === -1 ? 20 : item[index].weight,
							status: index === -1 ? true : item[index].status,
						}
					}else{
						let item = _this.tableData.aliPay;
						data = {
							payType,
							appid: index === -1 ? "" : item[index].appid,
							pid: index === -1 ? "" : item[index].pid,
							app_private_key: index === -1 ? "" : item[index].app_private_key,
							app_public_key: index === -1 ? "" : item[index].app_public_key,
							cert_public_key: index === -1 ? "" : item[index].cert_public_key,
							root_cert: index === -1 ? "" : item[index].root_cert,
							csr: index === -1 ? "" : item[index].csr,
							weight: index === -1 ? 20 : item[index].weight,
							status: index === -1 ? true : item[index].status,
						}
					}
					
					if(index !== -1){
						data.id = _this.tableData[payType === "wxpay" ? "wxPay" : "aliPay"][index].id;
					}
					_this.detail.data = data;
					_this.detail.show = true;
				}else if(type == "post"){
					_this.app.ajax({
						url: _this.detail.data.payType === "wxpay" ? "/admin/configWxPay/update" : "/admin/configAliPay/update",
						method: "POST",
						load: _this.detail.load,
						data: _this.detail.data,
						success(res){
							_this.detail.show = false;
							_this.getList();
							_this.$notify({title: "提示",message: res.msg, type: "success"});
						}
					})
				}
			},
			
			// 删除渠道
			deleteItem(id, payType){
				let _this = this;
				_this.app.ajax({
					url: payType === "wxpay" ? "/admin/configWxPay/del" : "/admin/configAliPay/del",
					method: "POST",
					load: _this.load,
					data: { id },
					success(res){
						_this.getList();
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				})
			},
			
			// 获取列表
			getList(){
				let _this = this;
				_this.app.ajax({
					url: "/admin/basis/getPayChannel",
					method: "POST",
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.tableData = res.data;
					}
				})
			},
			
		},
		mounted(){
			this.getList();
		},
	};
</script>

<style lang="scss" scoped>
	.adminMain{
		.h3{
			line-height: 30px;
			font-size: 17px;
			font-weight: 300;
			margin-bottom: 13px;
			span{
				font-size: 15px;
				margin-left: 25px;
				color: $background;
				cursor: pointer;
				vertical-align: middle;
				display: inline-block;
				margin-top: -2px;
			}
		}
	}
</style>